<template>
  <!-- 对话框(添加 / 修改) -->
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="500px"
    append-to-body
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <!-- <el-form-item label="编号" prop="serialNumber">
        <el-input v-model="form.serialNumber" placeholder="请输入编号" />
      </el-form-item> -->

      <el-row>
        <el-form-item label="学生" prop="studentId">
          <div style="display: flex; justify-content: flex-start">
            <el-input
              style="width: 210px; margin-right: 10px"
              v-model="form.name"
              placeholder="请选择学生"
              disabled
            />
            <el-button @click="studentFlag = true">选择关联学生</el-button>
          </div>
        </el-form-item>
      </el-row>
      <el-form-item label="班级" prop="classGrade">
        <el-input
          v-model="form.classGrade"
          style="width: 210px"
          placeholder="请选择学生"
          disabled
        />
      </el-form-item>
      <el-form-item label="学院" prop="collegeId">
        <college-selector
          v-model="form.collegeId"
          :disabled="true"
        ></college-selector>
      </el-form-item>

      <el-form-item label="学年" prop="schoolYear">
        <el-select v-model="form.schoolYear" placeholder="请选择学年">
          <el-option
            v-for="dict in this.getDictDatas('school_year')"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学期" prop="semester">
        <el-select v-model="form.semester" placeholder="请选择学期">
          <el-option
            v-for="dict in this.getDictDatas('college_semester_status')"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="获奖事项" prop="rewardMatter">
        <!-- <el-input v-model="form.rewardMatter" placeholder="请输入获将事项" /> -->
        <el-select
          v-model="form.rewardMatter"
          placeholder="请选择获奖事项"
          filterable
          clearable
          multiple
          collapse-tags
          @change="rewardChange"
          @clear="form.rewardDetails = ''"
        >
          <el-option
            v-for="item in rewardList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="获奖内容" prop="rewardDetails">
        <el-input
          type="textarea"
          v-model="form.rewardDetails"
          placeholder="请输入获奖内容"
        />
      </el-form-item>
      <el-form-item label="惩罚事项" prop="punishMatter">
        <el-select
          v-model="form.punishMatter"
          placeholder="请选择惩罚事项"
          filterable
          clearable
          multiple
          collapse-tags
          @change="punishChange"
          @clear="form.punishDetails = ''"
        >
          <el-option
            v-for="item in punishList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <!-- <el-input v-model="form.punishMatter" placeholder="请输入惩罚事项" /> -->
      </el-form-item>

      <el-form-item label="惩罚内容" prop="punishDetails">
        <el-input
          type="textarea"
          v-model="form.punishDetails"
          placeholder="请输入惩罚内容"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <el-dialog
      title="学生列表"
      :visible.sync="studentFlag"
      append-to-body
      :close-on-click-modal="false"
    >
      <student-list
        @handleStudentData="getStudentData"
        v-if="studentFlag"
      ></student-list>
    </el-dialog>
  </el-dialog>
</template>

<script>
import {
  createRewardPunishRecord,
  updateRewardPunishRecord,
} from "@/api/collegebase/rewardPunishRecord";
import common from "@/api/collegebase/common";
import { getClasses } from "@/api/collegebase/classes";
import { getStudentRoll } from "@/api/collegebase/studentRoll";
import studentList from "../studentChange/studentList.vue";
import request from "@/utils/request";
import { adminUrl } from "@/utils/baseUrl.js"
import CollegeSelector from "@/components/CollegeSelector";

export default {
  name: "RewardPunishRecordEdit",
  components: { CollegeSelector, studentList },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        studentId: [
          { required: true, message: "学生不能为空", trigger: "blur" },
        ],
        collegeId: [
          { required: true, message: "学院不能为空", trigger: "blur" },
        ],
        classGrade: [
          { required: true, message: "班级不能为空", trigger: "blur" },
        ],
        schoolYear: [
          { required: true, message: "学年不能为空", trigger: "blur" },
        ],
        semester: [
          { required: true, message: "学期不能为空", trigger: "blur" },
        ],
      },
      studentFlag: false,
      rewardList: [],
      punishList: [],
    };
  },
  created() {
    this.getRewardData();
    this.getPunishData();
  },
  props: {
    // 是否显示弹出层
    show: {
      type: Boolean,
      default: false,
    },
    // 显示弹出层标题
    title: {
      type: String,
      default: "",
    },
  },
  methods: {
    //获取得奖列表
    async getRewardData() {
      let res = await request({
        url: adminUrl + "/collegebase/student-reward-punish/byType/list",
        method: "get",
        params: {
          type: "reward",
        },
      });
      this.rewardList = res.data;
    },
    //获取惩罚列表
    async getPunishData() {
      let res = await request({
        url: adminUrl + "/collegebase/student-reward-punish/byType/list",
        method: "get",
        params: {
          type: "punish",
        },
      });
      this.punishList = res.data;
    },
    /** 初始化编辑的数据**/
    initData(rowData) {
      this.reset();
      this.getRewardData();
      this.getPunishData();
      if (rowData && rowData.id) {
        rowData["punishMatter"] = rowData["punishMatter"] ? rowData["punishMatter"].split(",") : [];
        rowData["rewardMatter"] = rowData["punishMatter"] ? rowData["rewardMatter"].split(",") : [];
        this.form = rowData;
        this.getStudentData({ id: rowData.studentId });
        this.form.datetimerange = [this.form.startTime, this.form.endTime];
      }
    },
    //奖项事件获取
    async rewardChange(val) {
      if (val.length > 0) {
        let rewardIds = val.join(",");
        let res = await request({
          url: adminUrl + "/collegebase/student-reward-punish/list",
          method: "get",
          params: {
            ids: rewardIds,
          },
        });
        if (res.data) {
          let rewardData = [];
          res.data.forEach((item) => {
            rewardData.push(item.details);
          });
          this.$set(this.form, "rewardDetails", rewardData.join(","));
        }
      }
    },
    async punishChange(val) {
      if (val.length > 0) {
        let punishIds = val.join(",");
        let res = await request({
          url: adminUrl + "/collegebase/student-reward-punish/list",
          method: "get",
          params: {
            ids: punishIds,
          },
        });
        if (res.data) {
          let punishData = [];
          res.data.forEach((item) => {
            punishData.push(item.details);
          });
          this.$set(this.form, "punishDetails", punishData.join(","));
        }
      }
    },
    /** 取消按钮 */
    cancel() {
      this.$emit("update:show", false);
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        studentId: undefined,
        schoolYear: undefined,
        semester: undefined,
        rewardMatter: undefined,
        punishMatter: undefined,
        rewardDetails: undefined,
        punishDetails: undefined,
        serialNumber: undefined,
        orgId: undefined,
        remark: undefined,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }

        this.form["punishMatter"] = this.form["punishMatter"] ? this.form["punishMatter"].join(",") : '';
        this.form["rewardMatter"] = this.form["rewardMatter"] ? this.form["rewardMatter"].join(",") : '';
        // 修改的提交
        if (this.form.id != null) {


          updateRewardPunishRecord(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.cancel();
            this.$emit("success");
          });
          return;
        }



        // 添加的提交
        createRewardPunishRecord(this.form).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.cancel();
          this.$emit("success");
        });
      });
    },
    /**
     * 学生选择事件
     */
    async getStudentData(data) {
      this.studentFlag = false;
      let studentres = await getStudentRoll(data.id);

      if (studentres.data) {
        let studentData = studentres.data;
        this.$set(this.form, "studentId", studentData.id);
        this.$set(this.form, "name", studentData.studentName);
        this.$set(this.form, "collegeId", studentData.collegesId);
        //获取原班级信息
        let classres = await getClasses(studentData.classesId);
        let classData = classres.data;
        this.$set(this.form, "classGrade", classData.classesName);
      }
    },
  },
};
</script>
